<template>
  <div class="app-container2">
    <div class="left_box">
      <commonTree2 :treeData="treeData" :currentId="currentDeviceCode" :defaultProps="defaultProps"
        @clickNodeEmitFn="treeClick" />
    </div>
    <div class="right-box">
      <div class="item1">
        <div class="item-left">
          <el-form inline>
            <el-form-item label="预测模型类型">
              <el-select class="js_common_select" :popper-append-to-body="false" placeholder="请选择" v-model="modelType">
                <el-option label="基于可靠度预测模型" value="reliable"></el-option>
                <el-option label="基于健康度预测模型" value="health"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="item-right">
          <el-button class="js_common_btn" @click="searchBtn">建模数据查询</el-button>
          <el-button class="js_common_btn" @click="importBtn">建模样本导入</el-button>
        </div>
      </div>
      <div class="item2">
        <EasyTable v-if="colsData.length" :colsData="colsData" :tableData="tableData" :checkedCol="checkedCols_index"
          @handleHeaderClick="handleHeaderClick">
        </EasyTable>
        <div class="no_data" v-else>暂无数据</div>
      </div>
      <div class="item3">
        <el-form inline style="width:100%;display:flex;">
          <el-button class="js_common_btn" style="margin-right: auto;" @click="startAnalysis">变量相关性分析</el-button>
          <el-form-item label="输入变量">
            <span class="num_box" > {{ selectedChart.variable }} </span>
          </el-form-item>
          <el-form-item label="相关系数">
            <span class="num_box"> {{ selectedChart.coefficient }} </span>
          </el-form-item>
        </el-form>
      </div>
      <div class="item4">
        <template v-if="charts.length > 0">
          <div v-for="(item, i) in charts" class="item4-box" :key="item.key"
            :class="charts.length == 4 ? 'item4-box-small' : ''" @click="clickCharts(i)"
            :style="{ boxShadow: selectedChart.index === i ? 'rgb(189, 193, 235) 0px 0px 5px 0px' : 'none' }">
            <lineCharts :echartsData="item" />
          </div>
        </template>
      </div>
      <!-- 建模数据查询弹窗 -->
      <searchDialog v-if="dialogVisible1" :deviceCode="currentDeviceCode" :deviceTypeCode="currentDeviceTypeCode"
        :type="modelType" @confirm="confirm1" @close="close1" @syncData="syncData"></searchDialog>
      <!-- 建模样本导入弹窗 -->
      <importDataDialog v-if="dialogVisible2" @confirm="confirm2" @close="close2"></importDataDialog>
    </div>
  </div>
</template>
<script>
import commonTree2 from "@/components/commonTree2";
import EasyTable from "@/components/CommonTable/EasyTable";
import lineCharts from "./lineCharts.vue";

import searchDialog from "./searchDialog";
import importDataDialog from "./importDialog";
import * as api from "@/api/myApi/yc_chuangjian";
import * as XGXApi from "@/api/myApi/yc_xiangguanxing";

export default {
  name: "",
  components: {
    commonTree2,
    EasyTable,
    lineCharts,
    searchDialog,
    importDataDialog,
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  dicts: ["arit_type"],
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentDeviceName: "",
      currentDeviceCode: "",
      currentDeviceTypeCode: "",
      modelType: "",
      tableData: [],
      colsData: [],
      // tableData: [
      //   {
      //     "sample_date": "2024/3/1",
      //     "reliable_value": "0.96",
      //     "run_time": "325"
      //   },
      //   {
      //     "sample_date": "2024/3/2",
      //     "reliable_value": "0.91",
      //     "run_time": "350"
      //   },
      //   {
      //     "sample_date": "2024/3/3",
      //     "reliable_value": "0.87",
      //     "run_time": "375"
      //   },
      //   {
      //     "sample_date": "2024/3/4",
      //     "reliable_value": "0.87",
      //     "run_time": "425"
      //   },
      //   {
      //     "sample_date": "2024/3/5",
      //     "reliable_value": "0.82",
      //     "run_time": "475"
      //   },
      //   {
      //     "sample_date": "2024/3/6",
      //     "reliable_value": "0.8",
      //     "run_time": "500"
      //   },
      //   {
      //     "sample_date": "2024/3/7",
      //     "reliable_value": "0.77",
      //     "run_time": "525"
      //   },
      //   {
      //     "sample_date": "2024/3/8",
      //     "reliable_value": "0.58",
      //     "run_time": "575"
      //   },
      //   {
      //     "sample_date": "2024/3/9",
      //     "reliable_value": "0.55",
      //     "run_time": "575"
      //   },
      //   {
      //     "sample_date": "2024/3/10",
      //     "reliable_value": "0.43",
      //     "run_time": "600"
      //   },
      //   {
      //     "sample_date": "2024/3/11",
      //     "reliable_value": "0.4",
      //     "run_time": "650"
      //   },
      //   {
      //     "sample_date": "2024/3/12",
      //     "reliable_value": "0.26",
      //     "run_time": "650"
      //   },
      //   {
      //     "sample_date": "2024/3/13",
      //     "reliable_value": "0.26",
      //     "run_time": "675"
      //   },
      //   {
      //     "sample_date": "2024/3/14",
      //     "reliable_value": "0.18",
      //     "run_time": "700"
      //   },
      //   {
      //     "sample_date": "2024/3/15",
      //     "reliable_value": "0.15",
      //     "run_time": "725"
      //   },
      //   {
      //     "sample_date": "2024/3/16",
      //     "reliable_value": "0.14",
      //     "run_time": "750"
      //   },
      //   {
      //     "sample_date": "2024/3/17",
      //     "reliable_value": "0.14",
      //     "run_time": "750"
      //   },
      //   {
      //     "sample_date": "2024/3/18",
      //     "reliable_value": "0.11",
      //     "run_time": "775"
      //   },
      //   {
      //     "sample_date": "2024/3/19",
      //     "reliable_value": "0.16",
      //     "run_time": "800"
      //   },
      //   {
      //     "sample_date": "2024/3/20",
      //     "reliable_value": "0.08",
      //     "run_time": "825"
      //   }
      // ],
      // colsData: [
      //   {
      //     "prop": "sample_date",
      //     "label": "采样时间",
      //     "width": "180"
      //   },
      //   {
      //     "prop": "reliable_value",
      //     "label": "可靠度",
      //     "width": "180"
      //   },
      //   {
      //     "prop": "run_time",
      //     "label": "累积运行时长",
      //     "width": "180"
      //   },
      //   {
      //     "prop": "aaa",
      //     "label": "AAA",
      //     "width": "180"
      //   },
      //   {
      //     "prop": "bbb",
      //     "label": "BBB",
      //     "width": "180"
      //   },
      //   {
      //     "prop": "ccc",
      //     "label": "CCC",
      //     "width": "180"
      //   },
      //   {
      //     "prop": "ddd",
      //     "label": "DDD",
      //     "width": "180"
      //   }
      // ],
      selectedChart: {
        index: undefined,
        variable: "",
        coefficient: "",
      },
      creating: false,
      charts: [],
      dialogVisible1: false,
      dialogVisible2: false, // 命名弹窗
      nameDialogVisible: false,
      nameForm: {
        name: "",
        desp: "",
      },
      nameRules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
      },
      checkedCols_key: ["reliable_value"],
      checkedCols_index: [2],//当前选择的列索引 用于表头样式
    };
  },

  computed: {
    treeData: function () {
      return this.$store.getters.deviceTree
        ? [this.$store.getters.deviceTree]
        : [];
    },
  },
  methods: {
    treeClick(cell) {
      // console.log(cell);
      if (cell.type) {
        this.currentDeviceCode = cell.code;
        this.currentDeviceTypeCode = cell.type;
        this.currentDeviceName = cell.name;
      }
      // 清除表格等数据
      this.tableData = [];
      this.colsData = [];
      this.charts = [];
      this.selectedChart.index = undefined;
      this.selectedChart.variable = "";
      this.selectedChart.coefficient = "";
      this.checkedCols_index = [];
      this.checkedCols_key = [];
    },
    searchBtn() {
      if (this.currentDeviceCode && this.modelType) {
        this.dialogVisible1 = true;
      } else {
        this.$modal.msgWarning("请先选择设备及预测模型类型");
      }
    },
    importBtn() {
      if (this.currentDeviceCode && this.modelType) {
        this.dialogVisible2 = true;
      } else {
        this.$modal.msgWarning("请先选择设备及预测模型类型");
      }
    },
    // 弹窗导入
    syncData(val) {
      console.log(val);
      this.tableData = val.tableData;
      this.colsData = val.tableName;
      this.initCheckCols()
    },
    initCheckCols() {
      this.checkedCols_index = [];
      this.checkedCols_key = [];
      if (this.colsData.length > 2) {
        this.checkedCols_index.push(2);
        this.checkedCols_key.push(this.colsData[1].prop);
      }
    },
    // 分析按钮
    startAnalysis() {
      this.charts = []
      this.selectedChart.index = null;
      this.selectedChart.variable = "";
      this.selectedChart.coefficient = "";
      if (this.checkedCols_key.length == 1) {
        return this.$modal.msgWarning("请选择要分析的变量列");
      }
      if (this.checkedCols_key.length > 1) {
        this.checkedCols_key.forEach((item, i) => {
          if (i > 0) {
            this.charts.push({
              key: Math.random(),
              xData: [],
              yData1: [],
              yData2: [],
              leftName: this.colsData.filter((item) => item.prop == this.checkedCols_key[0])[0]?.label,
              rightName: this.colsData.filter((item) => item.prop == this.checkedCols_key[i])[0]?.label,
            })
          }
        })
      }
      if (this.tableData.length) {
        let times = [];
        let outputData = [];
        this.tableData.forEach(item => {
          times.push(item.sample_date);
          outputData.push(item[this.checkedCols_key[0]]);
        })
        this.charts.forEach((item, i) => {
          item.xData = times;
          item.yData1 = outputData;
          item.yData2 = this.tableData.map(row => {
            return row[this.checkedCols_key[i + 1]];
          })
        })
      }
      // console.log(this.charts, "333")
    },
    clickCharts(i) {
      this.selectedChart.variable = this.charts[i].rightName;
      this.selectedChart.index = i;
      this.selectedChart.coefficient = ""
      XGXApi.getRelatedCoefficient({
        data: this.charts[i]['yData1'],
        correlationData: this.charts[i]['yData2']
      }).then(res => {
        if (res.code == 200) {
          this.selectedChart.coefficient = res.data
        }
      })

    },
    confirm1() { },
    close1() {
      this.dialogVisible1 = false;
    },
    confirm2(list) {

      this.tableData = [];
      this.colsData = [];
      const formData = new FormData();
      formData.append("file", list[0].raw);
      formData.append("deviceCode", this.currentDeviceCode);
      this.$modal.loading("正在导入数据，请稍候")
      api.importInitData(formData).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess(res.msg);
          this.dialogVisible2 = false;
          this.tableData = res.data.tableData;
          this.colsData = res.data.tableName;
          this.initCheckCols()
        }
      }).finally(() => {
        this.$modal.closeLoading();
      });
    },
    close2() {
      this.dialogVisible2 = false;
    },
    //点击表格表头
    handleHeaderClick(col) {
      const { label, property } = col
      const index = this.colsData.findIndex((item) => item.prop == property)
      if (index >= 2) {
        if (this.checkedCols_key.indexOf(property) > -1) {//要取消选中
          const i = this.checkedCols_key.indexOf(property)
          this.checkedCols_key.splice(i, 1)
          this.checkedCols_index.splice(i, 1)
        } else {
          if (this.checkedCols_key.length >= 5) {
            this.$modal.msgWarning("最多选中4个指标，请先取消部分指标");
          } else {//添加选中
            this.checkedCols_key.push(property)
            this.checkedCols_index.push(index + 1)
          }
        }
      }
    }
  },
  created() { },
  mounted() {
    if (!this.$store.getters.deviceTree) {
      this.$store.dispatch("getDeviceTree").then((deviceId) => {
        // this.currentDeviceCode = deviceId;
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.app-container2 {
  width: 100%;
  display: flex;
  height: 100%;
  box-sizing: border-box;
}

.left_box {
  flex: 0 0 auto;
}

.right-box {
  width: 0;
  height: 100%;
  flex: 1;
  margin-left: 10px;
  padding: 20px;
  box-sizing: border-box;
  //background: linear-gradient(180deg,
  //    rgba(21, 52, 104, 0.3) 0%,
  //    rgba(12, 29, 57, 0.3) 100%);
  display: flex;
  flex-direction: column;

  .item1,
  .item3 {
    // height: 80px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;

    ::v-deep .el-form--inline .el-form-item {
      margin-bottom: 0;
    }

    .num_box {
      display: inline-block;
      width: 120px;
      height: 30px;
      line-height: 30px;
      padding: 0px 10px;
      border: 1px solid #2e82af;
      color: #000000;
    }
  }

  .item2,
  .item4 {
    height: 50px;
    // border: 1px solid red;
    flex: 1 1 auto;
    margin: 10px 0;

    div.no_data {
      width: 100%;
      height: 100%;
      border: 1px solid #2e82af;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #cbcbcb;
    }
  }

  .item4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;


    .item4-box {
      cursor: pointer;
      padding: 10px;
      flex: 1;
      height: 100%;
      border: 1px solid #2e82af;
      margin: 10px 10px 0;
    }

    .item4-box-small {
      width: calc(50% - 20px) !important;
      height: 48% !important;
      flex: 0 1 auto !important;
    }
  }
}
</style>
